@keyframes spainner {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.loopchildre(@n,@index:0) when(@index <= @n) {
  &:nth-child(@{index}) {
    transform: rotate(calc(@index * 30deg));
    animation-delay: calc(0.1s * @index - 0.1s);
  }
  .loopchildre(@n,@index + 1);
}

.spainner {
  display: flex;
  justify-content: center;
  z-index: 1000;
  background-color: #d2d2d2;
  height: 100%;
  width: 100%;
  align-items: center;
  div {
    transform-origin: 5px -25px;
    animation: spainner 1.2s linear infinite;
    .loopchildre(12);
    &::after {
      content: " ";
      display: inline-block;
      position: absolute;
      width: 0.66rem;
      height: 2.22rem;
      border-radius: 22%;
      background-color: #fff;
    }
  }
}
